<template>
    <span @mouseenter="hovering = true"
          @mouseleave="hovering = false"
          @click="handleClickTag(tag)"
          class="milk-tag"
          :class="{'active':hovering}"
    >
        {{tag.name}}
    </span>
</template>

<script>
  export default {
    name: 'MilkTag',
    props: {
      tag: [Object]
    },
    data () {
      return {
        hovering: false
      }
    },
    methods: {
      handleClickTag (tag) {
        this.$emit('click', tag)
      }
    }
  }
</script>

<style>
    /*tag.vue*/
    .milk-tag {
        cursor: pointer;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 7px;
        height: 26px;
        line-height: 26px;
        color: #FFFFFF;
        background-color: #a175ed;
        font-size: 12px;
        padding: 0 17px;
        border-radius: 4px;
        letter-spacing: 0.3px;
        /*border: 1px solid #cbcbcb;*/
    }

    .milk-tag.active {
        background-color: #c5a3ff;
    }

</style>
